<template>
	<div>
		<m-table name="admin-clockin" :action="action" :search="search" ref="table">

			<el-table-column label="姓名" prop="name" width="120" />

			<el-table-column label="手机号" prop="phone" width="140" />

            <el-table-column label="打卡备注" prop="Memo"/>

            <el-table-column label="打卡次数" prop="Index" width="120" />

            <el-table-column label="连续打卡天数" prop="ClockinDays" width="120" />

			<el-table-column label="打卡时间" prop="Created" width="220" />

			<el-table-column label="详情" prop="state" width="90" fixed="right">
				<el-button size="mini" type="success" @click="openComment(scope.row , true)" v-if="scope.row.comment_count > 0" slot-scope="scope">查看</el-button>
                <el-button size="mini" type="danger" @click="openComment(scope.row , false)" v-else slot-scope="scope">评论</el-button>
			</el-table-column>
		</m-table>

        <el-dialog title="评论" :visible.sync="comment.show" width="50%">
            <el-form :model="comment.data" label-width="80px">

                <el-form-item label="姓名:">
                    <span>{{current.name}}</span>
                </el-form-item>

                <el-form-item label="手机号:">
                    <span>{{current.phone}}</span>
                </el-form-item>

                <el-form-item label="备注:">
                    <span>{{current.Memo}}</span>
                </el-form-item>

                <el-form-item>
                    <el-avatar shape="square" :size="100" fit="contain" :src="current.LeftFaceImg"></el-avatar>
                    <el-avatar shape="square" :size="100" fit="contain" :src="current.MainFaceImg" style="margin-left: 20px;"></el-avatar>
                    <el-avatar shape="square" :size="100" fit="contain" :src="current.RightFaceImg" style="margin-left: 20px;"></el-avatar>
                </el-form-item>

                <el-form-item v-if="isView" label="评论:">
                    {{ current.content }}
                </el-form-item>

                <el-form-item v-else>
                    <el-input v-model="comment.data.content" type="textarea" rows="5" placeholder="请输入评论内容" />
                </el-form-item>
            </el-form>
        
            <div slot="footer" class="dialog-footer">
                <el-button @click="comment.show = false">取消</el-button>
                <el-button type="success" @click="commentSubmit" v-if="isView == false">确定</el-button>
            </div>
        </el-dialog>

	</div>
</template>

<script>
import apiSelect from '@/components/custom/apiSelect';
import request from '@/utils/request';
export default {
	components: {
		apiSelect,
	},
	data() {
		return {
            current:{},
            isView:false,
            comment: {
                show: false,
                data: {
                    comment: '',
                },
            },
			search: [
				{ icon: 'el-icon-mobile', type: 'like', name: 'b.name', label: '用户姓名', span: 4, value: '' },
				{ icon: 'el-icon-mobile', type: 'like', name: 'b.phone', label: '联系方式', span: 4, value: '' },
			],
			action: { remove: false, edit: false, add: false, export: false },
		};
	},
	methods: {
        openComment(e,isView){
            this.isView = isView;
            this.current = e;
            this.comment.show = true;
            this.comment.data.id = e.Id;
            this.comment.data.clientId = e.ClientId;
        },
        async commentSubmit(){
            await request.post('/admin-clockin/comment', this.comment.data);
            this.comment.show = false;
            this.$message.success('评论成功');
            this.comment.data.id = 0;
            this.comment.data.clientId = 0;
            this.comment.data.content = '';
            this.$refs.table.load();
        },
	},
};
</script>

